import { Component } from 'react';
import './index.less'
import { Fire, Arrow } from '@react-vant/icons';
import Lazyimg from 'react-lazyimg-component';
import loadingImg from '../../../assets/loading.png'
class TopList extends Component {
  render() {
    return (
      <div className="goodsTop">
        <div className="title">
          <Fire color="#ee0a24" />商品排行榜
          <span className="more">更多 <Arrow /></span>
        </div>
        <div className="goods">
          {
            this.props.topList.map((item, index) => {
              return (
                <div className="goods_item" key={index}>
                  <div className="item_img">
                    <Lazyimg className="lazy_img" src={item.image} placeholder={<img src={loadingImg} alt='加载失败'/>}/>
                  </div>
                  <div className="item_info">
                    <div className="name">
                      {
                        item.storeName
                      }
                    </div>
                    <div><span className="price">  ￥{item.price}</span>
                      <span className="sale">销量{item.sales}件</span></div>
                  </div>
                </div>
              )
            })
          }

        </div>
      </div>
    )
  }
}
export default TopList;